<template>
	<div class="">
		<!-- <div class="stepBox">
			<Step></Step>
		</div> -->
		<div class="rulesBox">
			<p class="ruleText ruleText1">发送规则</p>
			<div class="topRules">
				<div class="operateDiv">
					<p class="operateText"><sup>*</sup>折扣类型:</p>
					<el-radio v-model="discountType" label="983001" :disabled="isFirst">电站打折</el-radio>
					<el-radio v-model="discountType" label="983002" :disabled="isFirst">优惠分组打折</el-radio>
					<span class="checkTxt" v-show="diffDiscountType" v-text="diffText" style="right:-4%"></span>
				</div>
				<div class="operateDiv">
					<p class="operateText"><sup>*</sup>用户标签:</p>
					<el-radio v-model="userLabel" label="982001">全部用户</el-radio>
					<el-radio v-model="userLabel" label="982002">全部会员</el-radio>
					<el-radio v-model="userLabel" label="982003">会员自动充电</el-radio>
					<el-radio v-model="userLabel" label="982004" :disabled="isStation">非会员</el-radio>
					<span class="checkTxt" v-show="diffUserLabel" v-text="diffText" style="right:-15%"></span>
				</div>
			</div>
		</div>
		<div class="rulesBox">
			<p class="ruleText ruleText2">微信分享设置</p>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>分享标题:</p>
				<el-input placeholder="请输入分享标题" v-model.trim="shareTitle" clearable>
				</el-input>
				<span class="checkTxt" v-show="showTheme" style="right:-15%">请输入3~50个字符</span>
				<span class="checkTxt" v-show="diffShareTitle" v-text="diffText" style="right:-15%"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>分享描述:</p>
				<el-input placeholder="请输入分享描述" v-model.trim="shareContent" clearable >
				</el-input>
				<span class="checkTxt" v-show="showContent" style="right:-15%">请输入3~50个字符</span>
				<span class="checkTxt" v-show="diffShareContent" v-text="diffText" style="right:-15%"></span>
			</div>
			<div class="operateDiv">
				<p class="operateText"><sup>*</sup>分享图片:</p>
				<el-upload
					class="newRules"	
					:limit="1"
					:show-file-list='false'
					:action="picUpload"
					:data="picData"
					:on-success="homeImgSuccess"
					:before-upload="beforeAvatarUpload">
					<img v-if="shareImageUrl" :src="PIC_URL+shareImageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<p class="textTip">(支持1MB以下JPG,PNG格式的图片)</p>
				<span class="checkTxt" v-show="diffShareImgMd5" v-text="diffText" style="right:-15%"></span>
			</div>
		</div>
		<div class="btns">
			<div class="pageBtn btn next" @click="discountSet(-1)">上一步</div>
			<div class="pageBtn btn save" @click="discountSet(0)">保存</div>
			<div class="pageBtn btn next" @click="discountSet(1)">下一步</div>
		</div>
	</div>
</template>

<script>
	import Step from '_components/Step'
	import {SAVE_OR_EDIT_RULE_LOTTERY,FILE_UPLOAD,FIND_RULE_LOTTERY_BY_CODE} from '@/config/url'
	import Bus from '@/bus.js'
	
	export default {
		components: {
			Step
		},
		data() {
			return {
				picUpload:FILE_UPLOAD,
				activityCode:sessionStorage.getItem('activityCode'),//活动code
				discountType:'983001',//折扣类型：983001 电站打折，983002 特惠分组
				userLabel:'982002',//用户标签：982001 全部用户，982002 全部会员，982003 会员自动充电，982004 非会员
				shareTitle:null,//微信分享标题
				shareContent:null,//微信分享描述
				shareImg:null,//微信分享图片
				shareImgMd5:null,//微信分享图片md5值
				shareImageUrl:null,//图片地址
				receiveType:sessionStorage.getItem('receiveType'),//领取类型：993023 打折，993024 抽取，993025 领取
				repeatRecord:sessionStorage.getItem('repeatRecord'),//活动复录：0 初录，1 复录
				showTheme:false,//显示标题提示
				showContent:false,//显示内容提示
				clickNext:false,//是否点击下一步
				repeatRecordContent:null,//初录信息
				diffText:'与初录不一致',
				diffDiscountType:false,
				diffUserLabel:false,
				diffReceive:false,
				diffShareTitle:false,
				diffShareContent:false,
				diffShareImgMd5:false,
				isIdentical:null,//0 一致，1 不一致
				isStation:false,//是否选择电站打折
				isFirst:sessionStorage.getItem('repeatRecord') == '1'
			}
		},
		mounted(){
			this.getFirstData()
		},
		computed:{
			picData(){
				return {
					repeatRecord:this.repeatRecord,
					htmlType:0,
				}
			}
		},
		watch:{
			discountType(val){
				this.isStation = val == '983002'
				this.diffDiscountType = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.discountType
			},
			userLabel(val){
				this.diffUserLabel = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.userLabel
			},
			shareTitle(val){
				let leng = val.length
				if(leng < 3){
					this.showTheme = true
				}else{
					this.showTheme = false
					this.diffShareTitle = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.shareTitle
				}
			},
			shareContent(val){
				let leng = val.length
				if(leng < 3){
					if(this.repeatRecord == 0){
						this.showContent = true
					}
				}else{
					this.showContent = false
					this.diffShareContent = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.shareContent
				}
			},
			shareImgMd5(val){
				this.diffShareImgMd5 = this.repeatRecord == 1 && this.repeatRecordContent && val != this.repeatRecordContent.shareImgMd5
			},
		},
		methods:{
			getFirstData(){
				this.$fetch(FIND_RULE_LOTTERY_BY_CODE,
						{
						"activityCode":this.activityCode,
						'repeatRecord':'0',
						},
					)
					.then(res=>{
						if(res.status == 1){
							this.repeatRecordContent = res.data
							if(res.data){
								if(this.repeatRecord == 0){
									this.updateData(res.data)
								}else{
									this.discountType = this.repeatRecordContent.discountType
									if(res.data.discountType != '983001'){
										this.diffDiscountType = true
									}
		
									if(res.data.userLabel != '982002'){
										this.diffUserLabel = true
									}
									this.getSecData()
								}
							}
						}else{
							this.$message({
								message: '获取初录规则设置数据失败',
								type: 'warning'
							});
						}
					})
					.catch(err=>{
						console.log(err)
						this.$message({
							message: '获取初录规则设置数据异常',
							type: 'warning'
						});
					})
			},
			getSecData(){
				this.$fetch(FIND_RULE_LOTTERY_BY_CODE,
						{
						"activityCode":this.activityCode,
						'repeatRecord':'1',
						},
					)
					.then(res=>{
						if(res.status == 1){
							let data = res.data
							if(data && this.repeatRecord == 1){
								this.updateData(data)
							}
						}else{
							this.$message({
								message: '获取复录规则设置数据失败',
								type: 'warning'
							});
						}
					})
					.catch(err=>{
						console.log(err)
						this.$message({
							message: '获取复录规则设置数据异常',
							type: 'warning'
						});
					})
			},
			updateData(data){
				this.discountType = data.discountType
				this.userLabel = data.userLabel
				this.shareTitle = data.shareTitle
				this.shareContent = data.shareContent
				this.shareImageUrl = data.shareImg
				this.discountType = data.discountType
			},
			homeImgSuccess(res, file) {
				// this.shareImageUrl = URL.createObjectURL(file.raw);
				this.shareImageUrl = res.url;
				this.shareImg = res.url
				this.shareImgMd5 = res.fileMD5
			},
			beforeAvatarUpload(file) {
				let name = file.name.split('.')
				const isJpg = name[name.length-1].toLowerCase() === 'jpg'|| name[name.length-1].toLowerCase() === 'png';

				// const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 1;

				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 1MB!');
				}
				if (!isJpg) {
					this.$message.error('只能上传jpg或png格式文件');
				}
				const isCh = /^[^\u4e00-\u9fa5]+$/.test(name[name.length-2]);
				if (!isCh) {
					this.$message.error('上传的文件名称不能有中文!');
				}
				return isLt2M && isJpg && isCh;
			},
			discountSet(type){
				let that = this
				if(type == -1){
					this.$router.push('/settingIndex/newBasics')
					Bus.$emit('changeStep')
				}else{
					if(this.shareImageUrl){
						if(this.showTheme || this.showContent){
							this.$message.error('分享标题或分享描述格式错误');
							return;
						}
						if(this.repeatRecord == 0){
							this.isIdentical = 0
						}else{
							if(this.diffDiscountType || this.diffUserLabel || this.diffShareTitle || this.diffShareContent || this.diffShareImgMd5){
								this.isIdentical = 1
							}else{
								this.isIdentical = 0
							}
						}
						this.$post(SAVE_OR_EDIT_RULE_LOTTERY,
							{
								"activityCode":this.activityCode,
								'discountType':this.discountType,
								'userLabel':this.userLabel,
								'shareTitle':this.shareTitle,
								'shareContent':this.shareContent,
								'shareImg':this.shareImg,
								'shareImgMd5':this.shareImgMd5,
								'activityType':this.receiveType,
								'repeatRecord':this.repeatRecord,
								'isIdentical':this.isIdentical
							},
							)
							.then(res=>{
								if(res.status == 1){
									this.$message({
										message: '保存成功',
										type: 'success'
									});
	
									if(type == 1){
										this.clickNext = true
										Bus.$emit('changeStep')
										if(that.discountType == '983001') {
											// Bus.$emit('changePrizeType','/settingIndex/newStation')
											this.$router.push('/settingIndex/newStation')
										}else if(that.discountType == '983002'){
											// Bus.$emit('changePrizeType','/settingIndex/newGroup')
											this.$router.push('/settingIndex/newGroup')
										}
									}
								}else{
									this.$message({
										message: '保存失败',
										type: 'warning'
									});
								}
							})
							.catch(err=>{
								console.log(err)
								this.$message({
									message: '保存失败',
									type: 'warning'
								});
							})
		
					}else{
						this.$message({
							message: '必填项不能为空',
							type: 'error'
						});
					}
				}
			}
			
		}
	}
</script>

<style lang="less">
	.rulesBox {
		width: 65%;
		margin: auto;
		margin-top: 0.1rem;
		input[type="file"]{
			display: none;
		}
		.newRules .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.newRules .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
		}
		.avatar {
			width: 100px;
			height: 100px;
			display: block;
		}
		.ruleText {
			width: 100%;
			color: #3395FF;
			font-size: 0.1rem;
			border-bottom: 1px solid rgba(240, 241, 242, 1);
			margin-bottom: 0.12rem;
		}
		.ruleText1::after{
			content: '';
			display: block;
			width: 0.4rem;
			height: 0.016rem;
			background: rgba(51,149,255,1);
		}
		.ruleText2::after{
			content: '';
			display: block;
			width: 0.6rem;
			height: 0.016rem;
			background: rgba(51,149,255,1);
		}
		
		.topRules {
			width: 93%;
			margin: auto;
		}
		
		.operateDiv {
			width: 80%;
			margin: auto;
			margin-bottom: 0.15rem;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-left: 0;
			position: relative;
			.checkTxt{
				color: #FF2E2E;
				position: absolute;
				right: -12%;
			}
		}
		
		.operateText {
			text-align: end;
			width: 19%;
			margin-right: 0.08rem;
		}
		
		.textTip {
			padding-top: 0.05rem;
			color: #999;
		}
	}
	
	
	.btns {
		position: fixed;
		bottom:0.15rem;
		left:45%;
	}
	
	.pageBtn {
		width: 0.8rem;
		height: 0.2rem;
		background: #3395FF;
		border-radius: 8px;
		color: #fff;
		margin-left: 0.2rem;
	}
	
	// .next {
	// 	background: #A9D0FF;
	// }
</style>